<toaster-container></toaster-container>
<app-progress-line *ngIf="isRequesting"></app-progress-line>
<app-error-message *ngIf="response && response.error">
  {{response.error.message}}
</app-error-message>
<div class="container-login">
  <div class="wrap-login">
    <form>
      <div class="login-header">
        <span>
          Welcome
        </span>
        <p>
            Sign in to continue to IOT Dashboard
        </p>
      </div>

      <div class="form-group material-input">
        <input type="text" class="app-login-form-email" material-input name="email" [(ngModel)]="form.email">
        <span class="focus-input" data-placeholder="Email"></span>
        <span class="error-message" *ngIf="error(response, 'email')">{{error(response, 'email')}}</span>

      </div>

      <div class="form-group material-input">
        <span class="btn-show-pass" (click)="togglePassword();">
          <i [ngClass]="{'icon-visibility_off': passwordVisibilty, 'icon-visibility': (!passwordVisibilty)}"></i>
        </span>
        <input class="app-login-form-password" [type]="passwordVisibilty ? 'text' : 'password'" material-input name="password" [(ngModel)]="form.password">
        <span class="focus-input" data-placeholder="Password"></span>
        <span class="error-message" *ngIf="error(response, 'password')">{{error(response, 'password')}}</span>

      </div>

      <div class="form-group login-button">
        <button class="btn btn-primary app-login-form-submit" (click)="login($event);">
          Login
        </button>
      </div>

      <div class="">
        Don’t have an account?
        <a routerLink="/signup" class="app-signup-button">
          Sign Up
        </a>
        <br>
        <a routerLink="/forgot-password" class="app-forget-password-link">
          Forgot Password? 
        </a>
      </div>
    </form>
  </div>
</div>